<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="shortcut icon" href="favicon.ico"> <link href="__CSS__/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
<link href="__CSS__/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
<link href="__CSS__/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<link href="__CSS__/animate.min.css" rel="stylesheet">
<link href="__CSS__/style.min862f.css?v=4.1.0" rel="stylesheet">
<link href="__CSS__/plugins/sweetalert/sweetalert.css" rel="stylesheet">
<link href="__CSS__/plugins/sweetalert/sweetalert.css" rel="stylesheet">
<link href="__CSS__/plugins/webuploader/webuploader.css" rel="stylesheet">

<script src="__UEDITOR__/ueditor.config.js"></script>
<script src="__UEDITOR__/ueditor.all.min.js"></script>
<script src="__UEDITOR__/lang/zh-cn/zh-cn.js"></script>

<body>

<!-- Panel Style -->
<div class="ibox float-e-margins">
    <span><br>&nbsp;&nbsp;&nbsp;</span>
    <i class="fa fa-home"></i> <a target="_top" href="{:U('/Admin/index')}">首页</a> &raquo; 文章管理 &raquo; 文章列表
    <div class="ibox-title">
        <h5>文章管理</h5>
    </div>

        <!--<i class="fa fa-bell"></i> 欢迎使用登陆网站后台，建站的首选工具。-->
        <div class="row row-lg">
            <div class="col-sm-12">
                <div class="ibox-content">
                    <form method="get" class="form-horizontal">
                        <div class="form-group">

                            <label class="col-sm-2 col-lg-2 control-label"><span style="color: darkred">*</span>文章标题</label>
                            <div class="col-sm-10 col-lg-8">
                                <input type="text" class="form-control" name="art_title" required="" aria-required="true"> <span class="help-block m-b-none"><i class="fa fa-info-circle"></i>标题可以写50个字</span>
                            </div>
                            <div class="col-lg-2"></div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 col-lg-2 col-md-2 control-label"><span style="color: darkred">*</span>栏目分类</label>
                            <div class="col-sm-10 col-md-2 col-lg-10">
                                <select class="form-control m-b" name="cat_id"  required="" aria-required="true">
                                    <option value="0">===顶级栏目===</option>
                                    <volist name="cat" id="c">
                                        <option value="{$c['cat_id']}">{$c['_cat_name']}</option>
                                    </volist>
                                </select>
                            </div>
                       </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"><span style="color: darkred">*</span>标签</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="art_name" required="" aria-required="true"><span class="help-block m-b-none"><i class="fa fa-info-circle"></i>多个标签中间用英文','相隔开</span>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"><span style="color: darkred">*</span>作者</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="art_author" required="" aria-required="true">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 col-lg-2 col-lg-2 control-label">缩略图</label>
                            <div class="col-sm-6 col-lg-8 col-lg-8">
                                <input type="text" disabled class="form-control">
                                <div id="uploader-demo">
                                    <!--用来存放item-->
                                    <div id="fileList" class="uploader-list"></div>
                                </div>
                            </div>
                            <div  class="col-lg-2  col-md-2">
                                <div id="filePicker">选择图片</div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"><span style="color: darkred">*</span>描述：</label>
                            <div class="col-sm-10">
                                <textarea id="ccomment" class="form-control" name="art_description" required="" aria-required="true"></textarea><span class="help-block m-b-none">
                                    <i class="fa fa-info-circle"></i>详细内容在255字符之内！
                                </span>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">内容：</label>
                            <div class="col-sm-10">
                                <script id="editor" name="art_content" value="" type="text/plain" style="width:960px;height:500px;"></script>
                            </div>

                            <script type="text/javascript">
                                //实例化编辑器
                                var ue = UE.getEditor('editor');
                            </script>
                            <style>
                                .edui-default{line-height: 28px;}
                                div.edui-combox-body,div.edui-button-body,div.edui-splitbutton-body
                                {overflow: hidden; height:20px;}
                                div.edui-box{overflow: hidden; height:22px;}
                            </style>
                        </div>




                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button class="btn btn-primary" type="submit">保存内容</button>
                                <button class="btn btn-white" type="submit">取消</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            </div>
        </div>
    </div>

<!-- End Panel Style -->



<script src="__JS__/jquery.min.js?v=2.1.4"></script>
<script src="__JS__/bootstrap.min.js?v=3.3.6"></script>
<script src="__JS__/content.min.js?v=1.0.0"></script>
<script src="__JS__/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="__JS__/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="__JS__/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="__JS__/plugins/sweetalert/sweetalert.min.js"></script>
<script src="__JS__/plugins/layer/layer.min.js"></script>
<script src="__JS__/plugins/webuploader/webuploader.js"></script>

<script src="__JS__/demo/bootstrap-table-demo.min.js"></script>



<script>

        var artOpt,
            fileList = $('#fileList'),
            btnAdd =  $('#btn_add'),
            art =  $('#art');
            artOpt = {
                add: function () {
                    //弹出一个iframe层
                 /*   $('#parentIframe').on('click', function(){
                        layer.open({
                            type: 2,
                            title: 'iframe父子操作',
                            maxmin: true,
                            shadeClose: true, //点击遮罩关闭层
                            area : ['800px' , '520px'],
                            content: 'test/iframe.html'
                        });
                    });*/



                },
                edit: function () {

                },
                remove:function () {
                    var rows = art.bootstrapTable('getSelections');
                    var ids = [];
                    if (rows.length > 0) {
                    for(var i=0; i<rows.length; i++){
                        ids.push(rows[i]['art_id']);
                    }
                    swal({
                        title: "你确认要删除"+rows.length+"记录吗?",
                        text: "删除后将无法恢复，请谨慎操作！",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "delete",
                        closeOnConfirm: false
                    },
                    function(){
                        swal("删除成功!", rows.length+"条记录已经删除！", "success");

                            $.ajax({
                                url: "{:U('/Admin/Article/remove')}",
                                type: 'POST',
                                data: {
                                    'ids' : ids.join(','),
                                },
                                success: function (data) {
                                    if (data) {
                                        art.bootstrapTable('refresh');
                                    } else {
                                        $.messager.alert('删除提示','没有任何数据被删除','warning');
                                    }


                                }
                            });

                    });
                    } else {
                        swal('删除提示','删除记录至少选择一条数据');
                    }
                }
            }
        art.bootstrapTable({
            url: "{:U('/Admin/Article/artData')}",
            columns:[{
                'field': 'id',
                'title': '编号',
                'checkbox':true,

            } ,{
                'field': 'art_title',
                'title': '标题'
            },{
                'field': 'art_author',
                'title': '作者'
            },{
                'field': 'art_view',
                'title': '点击数'
            },{
                'field': 'pub_time',
                'title': '发表时间',
                sortable:true,
            },
            {
                'field': 'art_id',
                'title': '文章编号',
                'visible': false,
            }
            ],
            toolbar: '#toolbar',
            pagination: true, //是否显示分页（*）
            ///queryParams: oTableInit.queryParams,//传递参数（*）
            sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
            pageNumber:1, //初始化加载第一页，默认第一页
            pageSize: 50, //每页的记录行数（*）
            pageList: [10, 20, 30, 40], //可供选择的每页的行数（*）
            showColumns:true,
            showToggle:true,
            showRefresh:true,
            search:true,
            keyEvents:true,
    });



        $(function(){
            /*init webuploader*/
            var fileList=$("#fileList");   //这几个初始化全局的百度文档上没说明，好蛋疼。
            var thumbnailWidth = 100;   //缩略图高度和宽度 （单位是像素）
            var thumbnailHeight = 100;


            // 初始化Web Uploader
            var uploader = WebUploader.create({

            // 选完文件后，是否自动上传。
            auto: true,

            // swf文件路径
            swf: "__JS__/plugins/webuploader/Uploader.swf",

            // 文件接收服务端。
            server: "{:U('/Admin/Article/fileupload')}",

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker',

            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/jpg,image/jpeg,image/png,image/gif,image/bmp'
            }
            });



            // 当有文件添加进来的时候
            uploader.on( 'fileQueued', function( file ) {
            var $li = $(
                            '<div id="' + file.id + '" class="file-item thumbnail">' +
                            '<img>' +
                            '<div class="info">' + file.name + '</div>' +
                            '</div>'
                    ),
                    $img = $li.find('img');


            // $list为容器jQuery实例
                fileList.append( $li );

            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            // thumbnailWidth x thumbnailHeight 为 100 x 100
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }

                $img.attr( 'src', src );
            }, thumbnailWidth, thumbnailHeight);
            });

            // 文件上传过程中创建进度条实时显示。
            uploader.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                    $percent = $li.find('.progress span');

            // 避免重复创建
            if ( !$percent.length ) {
                $percent = $('<p class="progress"><span></span></p>')
                        .appendTo( $li )
                        .find('span');
            }

            $percent.css( 'width', percentage * 100 + '%' );
            });

            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            uploader.on( 'uploadSuccess', function( file,response) {
            $( '#'+file.id ).addClass('upload-state-done');
            });

            // 文件上传失败，显示上传出错。
            uploader.on( 'uploadError', function( file ) {
            var $li = $( '#'+file.id ),
                    $error = $li.find('div.error');

            // 避免重复创建
            if ( !$error.length ) {
                $error = $('<div class="error"></div>').appendTo( $li );
            }

            $error.text('上传失败');
            });

            // 完成上传完了，成功或者失败，先删除进度条。
            uploader.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress').remove();
            });

        })



</script>

<style>
    #fileList {
        margin: 10px;
        width: 100%;
    }
    #fileList .file-item .info{
        width:100px;
        height:30px;
        line-height: 30px;
        overflow: hidden;
        text-align: center;
    }
    #fileList .file-item .error{
        position: relative;
        left: 0;
        top: -120px;
        text-align: center;
        background-color: black;
        filter:alpha(opacity=50);
        -moz-opacity:0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5;
    }
    #fileList .file-item{
        position: relative;
        width: 100px;
        float: left;
        height: 100px;
        margin-left: 10px;

    }
    #filePicker {
        clear: both;
        margin: 0;
        padding: 0;
    }
</style>
</body>
</html>